﻿<!DOCTYPE html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <title>会员名册系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- site favicon -->
    <link rel="icon" type="image/png" href="assets/images/favicon.png" />
    <!-- Place favicon.ico in the root directory -->

    <!-- All stylesheet and icons css  -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/animate.css" />
    <link rel="stylesheet" href="assets/css/all.min.css" />
    <link rel="stylesheet" href="assets/css/swiper.min.css" />
    <link rel="stylesheet" href="assets/css/lightcase.css" />
    <link rel="stylesheet" href="assets/css/style.css" />
    <style>
      .story__content_flex {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 20px;
      }
      .story__content_flex h4 {
        margin: 0;
      }
      .story__content_flex button {
        background: #f24570;
        padding-block: 18px;
        padding-inline: 20px;
        border-radius: 4px;
        color: #fff;
        padding: 8px;
        transition: all 0.3s ease;
      }
      .story__content_flex button:hover {
        border-radius: 15px;
        box-shadow: var(--shadow);
      }
    </style>
  </head>

  <body>
    <!-- ================> Page Header section start here <================== -->
    <div
      class="pageheader bg_img"
      style="background-image: url(assets/images/bg-img/pageheader.jpg)"
    >
      <div class="container">
        <div class="pageheader__content text-center">
          <h2>会员详情</h2>
        </div>
      </div>
    </div>
    <!-- ================> Page Header section end here <================== -->

    <!-- ================> Group section end here <================== -->
    <div class="group group--single padding-bottom">
      <div class="group__top" style="display: none">
        <div class="container">
          <div class="row">
            <div class="col-xl-3 d-none d-xl-block"></div>
            <div class="col-xl-9">
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button
                    class="nav-link active"
                    id="gt2-tab"
                    data-bs-toggle="tab"
                    data-bs-target="#gt2"
                    type="button"
                    role="tab"
                    aria-controls="gt2"
                    aria-selected="false"
                  >
                    <i class="fa-solid fa-users"></i> Profile <span>30</span>
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="group__bottom">
        <div class="container">
          <div class="row g-4">
            <div class="col-xl-6 order-xl-1">
              <div class="group__bottom--left">
                <div class="tab-content" id="myTabContent">
                  <div
                    class="tab-pane fade show active"
                    id="gt2"
                    role="tabpanel"
                    aria-labelledby="gt2-tab"
                  >
                    <div class="info">
                      <div class="info-card mb-4">
                        <div class="info-card-title">
                          <h6>个人信息</h6>
                        </div>
                        <div class="info-card-content">
                          <ul class="info-list"></ul>
                        </div>
                      </div>
                      <div class="info-card mb-4">
                        <div class="info-card-title">
                          <h6>择偶标准</h6>
                        </div>
                        <div class="info-card-content">
                          <ul class="info-list1"></ul>
                        </div>
                      </div>
                      <div class="info-card mb-4">
                        <div class="info-card-title">
                          <h6>兴趣爱好</h6>
                        </div>
                        <div class="info-card-content">
                          <ul class="info-list2"></ul>
                        </div>
                      </div>
                      <div class="info-card mb-4">
                        <div class="info-card-title">
                          <h6>面试官评语</h6>
                        </div>
                        <div class="info-card-content">
                          <p></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 order-xl-0">
              <div class="group__bottom--center">
                <div class="story__item style2">
                  <div class="story__inner">
                    <div class="story__thumb position-relative">
                      <img
                        alt="dating thumb"
                      />
                    </div>
                    <div class="story__content px-0 pb-0">
                      <div class="story__content_flex">
                        <h4>唐光千</h4>
                        <button>加入对比</button>
                      </div>
                      <p class="mb-2">个人简介</p>
                      <div class="story__content--author mt-3 pb-2">
                        <h6 class="d-block w-100 mb-3">照片</h6>
                        <div class="row g-2 row1"></div>
                      </div>
                      <div class="story__content--author mt-3 pb-2">
                        <h6 class="d-block w-100 mb-3">视频</h6>
                        <div class="row g-2 row2"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-xl-3 order-xl-2">
              <div class="group__bottom--right">
                <div class="modal-content border-0 mb-4">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">个人心语</h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="groupmodal" id="groupmodal">
      <div class="container">
        <div class="groupmodal__area">
          <div class="post-item">
            <div class="post-content">
              <div class="post-author">
                <div class="post-author-inner">
                  <div class="author-thumb">
                    <img
                      src="assets/images/member/profile/profile.jpg"
                      alt="datting thumb"
                    />
                  </div>
                  <div class="author-details">
                    <h6><a href="#">William Smith</a></h6>
                    <ul class="post-status">
                      <li class="post-privacy">
                        <i class="icofont-world"></i> Public
                      </li>
                      <li class="post-time">6 Mintues Ago</li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="post-description">
                <div class="post-desc-img">
                  <img
                    src="assets/images/group/single/01.jpg"
                    alt="dating thumb"
                  />
                </div>
              </div>
            </div>

            <div class="post-meta">
              <div class="post-meta-top">
                <p>
                  <a href="#"
                    ><i class="fa-solid fa-thumbs-up"></i>
                    <i class="fa-solid fa-heart"></i>
                    <i class="fa-solid fa-face-laugh"></i
                    ><span>Julia, Petrova & 306 like this</span></a
                  >
                </p>
                <p><a href="#">136 Comments</a></p>
              </div>
              <div class="post-meta-bottom">
                <ul class="react-list">
                  <li class="react">
                    <a href="#"><i class="fa-solid fa-thumbs-up"></i>Like</a>
                  </li>
                  <li class="react">
                    <a href="#"><i class="fa-solid fa-comment"></i>Comment</a>
                  </li>
                  <li class="react">
                    <a href="#"
                      ><i class="fa-solid fa-share-nodes"></i> Share
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="groupmodal" id="groupmodalvideo">
      <div class="container">
        <div class="groupmodal__area">
          <div class="post-item">
            <div class="post-content">
              <div class="post-author">
                <div class="post-author-inner">
                  <div class="author-thumb">
                    <img
                      src="assets/images/member/profile/profile.jpg"
                      alt="datting thumb"
                    />
                  </div>
                  <div class="author-details">
                    <h6><a href="#">William Smith</a></h6>
                    <ul class="post-status">
                      <li class="post-privacy">
                        <i class="icofont-world"></i> Public
                      </li>
                      <li class="post-time">6 Mintues Ago</li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="post-description">
                <div class="post-desc-img">
                  <iframe
                    src="https://www.youtube.com/embed/U9O8G5AreXE"
                    title="YouTube video player"
                    height="300"
                    allowfullscreen
                  ></iframe>
                </div>
              </div>
            </div>

            <div class="post-meta">
              <div class="post-meta-top">
                <p>
                  <a href="#"
                    ><i class="fa-solid fa-thumbs-up"></i>
                    <i class="fa-solid fa-heart"></i>
                    <i class="fa-solid fa-face-laugh"></i
                    ><span>Julia,Akhi & 306 like this</span></a
                  >
                </p>
                <p><a href="#">136 Comments</a></p>
              </div>
              <div class="post-meta-bottom">
                <ul class="react-list">
                  <li class="react">
                    <a href="#"><i class="fa-solid fa-thumbs-up"></i>Like</a>
                  </li>
                  <li class="react">
                    <a href="#"><i class="fa-solid fa-comment"></i>Comment</a>
                  </li>
                  <li class="react">
                    <a href="#"
                      ><i class="fa-solid fa-share-nodes"></i> Share
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ================> Group section end here <================== -->
    <!-- All Needed JS -->
    <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/swiper.min.js"></script>
    <!-- <script src="assets/js/all.min.js"></script> -->
    <script src="assets/js/wow.js"></script>
    <script src="assets/js/counterup.js"></script>
    <script src="assets/js/jquery.countdown.min.js"></script>
    <script src="assets/js/lightcase.js"></script>
    <script src="assets/js/waypoints.min.js"></script>
    <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/request.js"></script>
    <script>
      $(function () {
        function getQueryParam(paramName) {
          var urlParams = new URLSearchParams(window.location.search);
          return urlParams.get(paramName);
        }
        const id = getQueryParam("memberId");
        const list = {
          年龄: "nianling",
          性别: "xingbie",
          生日: "shengri",
          身高: "shengao",
          体重: "weight",
          职业: "job",
          工作单位: "company",
          收入: "shouru",
          婚姻状态: "hunyin",
          居住情况: "juzhu",
          房产情况: "fangchan",
          是否有车: "youche",
          教育情况: "jiaoyu",
          留学经历: "liuxue",
        };
        request("/api/pad/UserInfo/get", {
          type: "get",
          data: {
            uuid: id,
          },
        })
          .then((res) => {
            if (res.code == 200) {
              const data = res.data;
              console.log(data);
              $(".story__content h4").text(data.nicheng);
              $(".story__content .mb-2").text(data.personal);
              $("#exampleModalLabel").text(data.personalReflection);
              $(".info .info-list").html(
                Object.keys(list)
                  .map((e) => {
                    return `    <li>
                              <p class="info-name">${e}</p>
                              <p class="info-details">${data[list[e]] || ""}</p>
                            </li>`;
                  })
                  .join("")
              );
              $(".info-card-content>p").text(data.interviewerComment);
              $(".info .info-list1").html(
                data.matingRequire.split(",").map((e) => {
                  return `<li>${e}</li>`;
                })
              );
              $(".info .info-list2").html(
                data.interests.split(",").map((e) => {
                  return `<li>${e}</li>`;
                })
              );
              $(".position-relative img").attr("src", data.touxaing);
              const images = data.xiangCeList.filter((e) => e.type == "image");
              const video = data.xiangCeList.filter((e) => e.type == "video");
              $(".story__content--author .row1").html(
                images
                  .map((e) => {
                    let dom = `<img
                                src="${e.pictureid}"
                                alt="dating thumb"
                            />`;
                    return `<div class="col-4">
                            <a
                              href="#groupmodal"
                              data-rel="lightcase:callection"
                              >${dom}</a>
                          </div>`;
                  })
                  .join("")
              );
              $(".story__content--author .row2").html(
                `<video style="width:250px;height:200px" fit="cover" controls src="${video[0].pictureid}"></video>`
              );
            }
          })
          .catch((e) => {
            console.log(e);
          });
        $(".story__content_flex button").click(function () {
          let ids = JSON.parse(localStorage.getItem("ids") || "[]");
          if (ids.length >= 4) {
            alert("只能加入4个用户对比");
            return;
          }
          if (ids.includes(id)) {
            alert("用户已存在");
            return;
          }
          ids.push(id);
          localStorage.setItem("ids", JSON.stringify(ids));
          alert("添加成功")
        });
      });
    </script>
  </body>
</html>
